import QtQuick 2.14
import QtQuick.Controls 2.14
Item {
    id:root
    implicitWidth: 308
    implicitHeight: 360
    property int whiteIndex: 0
    property int expansionOrContraction: -1
    property bool lock:true
    property int exOrCoCheckedIndex: -1
    property var images:[
        {
            checked_img:'qrc:/img/expansion/eo_full_selected.png',
            normal_img:'qrc:/img/expansion/eo_full.png',
        },

        {

            checked_img:'qrc:/img/expansion/eo_up_selected.png',
            normal_img:'qrc:/img/expansion/eo_up.png',
        },
        {

            checked_img:'qrc:/img/expansion/eo_right_selected.png',
            normal_img:'qrc:/img/expansion/eo_right.png',
        },
        {

            checked_img:'qrc:/img/expansion/eo_bottom_selected.png',
            normal_img:'qrc:/img/expansion/eo_bottom.png',
        },
        {
            checked_img:'qrc:/img/expansion/eo_left_selected.png',
            normal_img:'qrc:/img/expansion/eo_left.png',
        },

        {

            checked_img:'qrc:/img/contraction/co_full_selected.png',
            normal_img:'qrc:/img/contraction/co_full.png',
        },
        {

            checked_img:'qrc:/img/contraction/co_up_selected.png',
            normal_img:'qrc:/img/contraction/co_up.png',
        },
        {

            checked_img:'qrc:/img/contraction/co_right_selected.png',
            normal_img:'qrc:/img/contraction/co_right.png',
        },
        {

            checked_img:'qrc:/img/contraction/co_bottom_selected.png',
            normal_img:'qrc:/img/contraction/co_bottom.png',
        },
        {

            checked_img:'qrc:/img/contraction/co_left_selected.png',
            normal_img:'qrc:/img/contraction/co_left.png',
        },

    ];

    // property var contraction:[
    //     {

    //         checked_img:'qrc:/img/contraction/co_top_selected.png',
    //         normal_img:'qrc:/img/contraction/co_top.png',
    //     },
    //     {

    //         checked_img:'qrc:/img/contraction/co_right_selected.png',
    //         normal_img:'qrc:/img/contraction/co_right.png',
    //     },
    //     {

    //         checked_img:'qrc:/img/contraction/co_bottom_selected.png',
    //         normal_img:'qrc:/img/contraction/co_bottom.png',
    //     },
    //     {

    //         checked_img:'qrc:/img/contraction/co_left_selected.png',
    //         normal_img:'qrc:/img/contraction/co_left.png',
    //     },
    //     {
    //         checked_img:'qrc:/img/contraction/co_full_selected.png',
    //         normal_img:'qrc:/img/contraction/co_full.png',
    //     },
    // ];
/*
    function imge_selectfuncation(index){
        var img_src=''
        if(root.expansionOrContraction === 1 )
        {
            if(root.lock){
                if(index === 0){
                    img_src= root.exOrCoCheckedIndex === index  ? root.images[index+5].checked_img : root.images[index+5].normal_img
                }
                else
                {
                    img_src= root.exOrCoCheckedIndex === index ? root.images[index+6].checked_img : root.images[index+6].normal_img
                }
            }else{
                img_src= root.exOrCoCheckedIndex ===index ? root.images[index+6].checked_img : root.images[index+6].normal_img
            }

        }else {
            if(root.lock){
                if(index === 0)
                    img_src= root.exOrCoCheckedIndex === index ? root.images[index].checked_img : root.images[index].normal_img
                else
                    img_src= root.exOrCoCheckedIndex === index ? root.images[index+1].checked_img : root.images[index+1].normal_img
            }else{

                img_src= root.exOrCoCheckedIndex === index ? root.images[index+1].checked_img : root.images[index+1].normal_img
            }
        }

        // console.log(index,root.exOrCoCheckedIndex,img_src)
        return img_src
    }
    */
    function imge_selectfuncation(index) {
        var baseIndex = root.expansionOrContraction === 1 ? 5 : 0;
        var offset = root.lock ? (index === 0 ? 0 : 1) : 1;
        var imgIndex = baseIndex + offset + index;
        var img_src = root.exOrCoCheckedIndex === index ? root.images[imgIndex].checked_img : root.images[imgIndex].normal_img;
        return img_src;
    }

    function mouseHandle(index)
    {
       if(root.exOrCoCheckedIndex === index)
       {
          root.exOrCoCheckedIndex =-100
       }else{
          root.exOrCoCheckedIndex = index
       }

    }


    function exOrCoColorHandle(index)
    {
         return root.exOrCoCheckedIndex === index ? Qt.rgba(255,255,255,.6) :Qt.rgba(255,255,255,.4)
    }



    Rectangle{
        anchors.fill: parent
        color:"transparent"
        anchors.bottomMargin: 8
        Rectangle {
            id:modeSelect
            width: 308
            height: 200
            radius: 5
            color: Qt.rgba(255,255,255,0.3)
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top


            Rectangle {
                id:color_pixel
                radius: 5
                anchors.left: parent.left
                anchors.top: parent.top
                anchors.leftMargin: 25
                width: 90
                height: 90
                color:'transparent'
                Image {
                    id: img_color_pixel
                    source:  root.whiteIndex == 0 ?  'qrc:/img/color_pixel_selected.png' :'qrc:/img/color_pixel.png'
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.verticalCenterOffset: -15
                    width: 50
                    height: 50
                }


                Label{
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.top: img_color_pixel.bottom
                    anchors.topMargin: 3
                    text: qsTr("Color pixel")
                    font{
                        family: "Microsoft YaHei"
                        pixelSize: 16
                    }
                    color: "#fff"
                }

                MouseArea{
                    anchors.fill: parent
                    onPressed: {
                        root.whiteIndex =0
                    }
                    onReleased: {

                    }

                }
            }
            Rectangle {
                id:negative_gradient
                radius: 5
                anchors.left: parent.left
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 20
                width: 90
                height: 90
                color:'transparent'
                anchors.leftMargin: 25
                Image {
                    id: img_negative_gradient
                    source: root.whiteIndex == 3 ? 'qrc:/img/negative_gradient_selected.png': 'qrc:/img/negative_gradient.png'
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.verticalCenterOffset: -18
                    width: 50
                    height: 50
                }

                Label{
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.top: img_negative_gradient.bottom
                    anchors.topMargin: 3
                    text: qsTr("Negative\n gradient")
                    font{
                        family: "Microsoft YaHei"
                        pixelSize: 16

                    }
                    color: "#fff"
                }

                MouseArea{
                    anchors.fill: parent
                    onPressed: {
                        root.whiteIndex =3
                    }
                    onReleased: {

                    }

                }
            }

            Rectangle {
                id:full_area
                radius: 5
                anchors.top: parent.top
                anchors.right: parent.right
                width: 90
                height: 90
                color:'transparent'
                anchors.rightMargin: 25
                Image {
                    id: img_full_area
                    source: root.whiteIndex == 2 ? 'qrc:/img/full_area_selected.png':'qrc:/img/full_area.png'
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.verticalCenterOffset: -15
                    width: 50
                    height: 50
                }
                Label{
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.top: img_full_area.bottom
                    anchors.topMargin: 3
                    text: qsTr("Full area")
                    font{
                        family: "Microsoft YaHei"
                        pixelSize: 16

                    }
                    color: "#fff"
                }

                MouseArea{
                    anchors.fill: parent
                    onPressed: {
                        root.whiteIndex =2
                    }
                    onReleased: {

                    }

                }
            }

            Rectangle {
                id:gradient
                radius: 5
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 20
                anchors.right: parent.right
                width: 90
                height: 90
                color:'transparent'
                anchors.rightMargin: 25
                Image {
                    id: img_gradient
                    source: root.whiteIndex == 4 ? 'qrc:/img/gradient_selected.png' : 'qrc:/img/gradient.png'
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenterOffset: -18
                    width: 50
                    height: 50
                }
                Label{
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.top: img_gradient.bottom
                    anchors.topMargin: 3
                    text: qsTr("Gradient")
                    font{
                        family: "Microsoft YaHei"
                        pixelSize: 16

                    }
                    color: "#fff"
                }

                MouseArea{
                    anchors.fill: parent
                    onPressed: {
                        root.whiteIndex =4
                    }
                    onReleased: {

                    }

                }
            }
        }

        Rectangle{

            width: 308
            height: 181
            radius: 5
            color: Qt.rgba(255,255,255,0.3)
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top:modeSelect.bottom
            anchors.topMargin: 8
            //外扩内缩
            Rectangle{
                id:rect_expansionOrContraction
                width: 120
                height: 55
                anchors.top: parent.top
                anchors.topMargin: 6
                anchors.left: parent.left
                anchors.leftMargin: 16
                color: Qt.rgba(255,255,255,0.2)
                radius: 5
                Rectangle{
                    //外扩
                    color: 'transparent'
                    width: 55
                    height: 55
                    anchors.left: parent.left
                    Image {
                        width: 50
                        height: 50
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenter: parent.verticalCenter
                        id: img_expand_outward
                        source: root.expansionOrContraction == 0 ? 'qrc:/img/expand_outward_selected.png' : 'qrc:/img/expand_outward.png'
                    }

                    MouseArea{
                        anchors.fill: parent
                        onPressed: {

                            if(root.expansionOrContraction == 0)
                                root.expansionOrContraction = -1
                            else  if(root.expansionOrContraction != 0)
                                root.expansionOrContraction = 0
                        }
                        onReleased: {

                        }

                    }

                }

                Rectangle{
                    //内缩
                    width: 55
                    height: 55
                    anchors.right: parent.right
                    color: 'transparent'
                    Image {
                        width: 50
                        height: 50
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenter: parent.verticalCenter
                        id: img_contraction
                        source: root.expansionOrContraction == 1 ? 'qrc:/img/shrink_inward_selected.png' : 'qrc:/img/shrink_inward.png'
                    }

                    MouseArea{
                        anchors.fill: parent
                        onPressed: {
                            if(root.expansionOrContraction == 1)
                                root.expansionOrContraction = -1
                            else if(root.expansionOrContraction != 1)
                                root.expansionOrContraction = 1
                        }
                        onReleased: {

                        }

                    }
                }
            }
/******************************************************************************/
            Rectangle{
                width: 292
                height: 110
                color: 'transparent'
                anchors.top:rect_expansionOrContraction.bottom
                anchors.topMargin: 6
                anchors.leftMargin: 16
                anchors.left: parent.left

                Rectangle{
                    anchors.top: parent.top
                    color: 'transparent'
                    id:left_rect
                    width: 229
                    height: root.lock == false ?  110 : 52

                    Rectangle{
                        id:rect_a
                        anchors.left: parent.left
                        anchors.top: parent.top
                        width: root.lock == true ?  226 : 110
                        height:52
                        radius: 5
                        color: exOrCoColorHandle(root.exOrCoCheckedIndex == 0 ? 0:0 )
                        Image {
                            width: 30
                            height: 30
                            anchors.left: parent.left
                            anchors.leftMargin: 3
                            anchors.verticalCenter: parent.verticalCenter
                            id: img_eo_full
                            source: root.lock || root.expansionOrContraction ?   imge_selectfuncation(0) :imge_selectfuncation(0)
                        }

                        MouseArea{
                            anchors.fill: parent
                            onPressed: {
                                console.log('pressed',"0")
                                mouseHandle(0)


                            }
                            onReleased: {

                            }
                        }
                    }

                    Rectangle{
                        id:rect_b
                        visible:  root.lock == false
                        anchors.left: rect_a.right
                        anchors.top: parent.top
                        anchors.leftMargin: 6
                        width: 110
                        height:52
                        radius: 5
                        color:  exOrCoColorHandle(root.exOrCoCheckedIndex == 1 ? 1:1 )
                        Image {
                            width: 30
                            height: 30
                            anchors.left: parent.left
                            anchors.leftMargin: 3
                            anchors.verticalCenter: parent.verticalCenter
                            id: img_eo_right
                            source:root.lock || root.expansionOrContraction ?   imge_selectfuncation(1) :imge_selectfuncation(1)
                        }

                        MouseArea{
                            anchors.fill: parent
                            onPressed: {

                                console.log('pressed',"1")
                                 mouseHandle(1)


                            }
                            onReleased: {

                            }
                        }
                    }

                    Rectangle{
                        id:rect_c
                        visible:  root.lock == false
                        anchors.left: rect_d.right
                        anchors.bottom: parent.bottom
                        anchors.leftMargin: 6
                        width: 110
                        height:52
                        radius: 5
                        color: exOrCoColorHandle(root.exOrCoCheckedIndex == 2 ? 2:2 )
                        Image {
                            width: 30
                            height: 30
                            anchors.left: parent.left
                            anchors.leftMargin: 3
                            anchors.verticalCenter: parent.verticalCenter
                            id: img_eo_bottom
                            source: root.lock || root.expansionOrContraction ?   imge_selectfuncation(2) :imge_selectfuncation(2)
                        }

                        MouseArea{
                            anchors.fill: parent
                            onPressed: {
                                mouseHandle(2)


                            }
                            onReleased: {

                            }
                        }
                    }

                    Rectangle{
                        id:rect_d
                        visible:  root.lock == false
                        anchors.left: parent.left
                        anchors.bottom: parent.bottom

                        width: 110
                        height:52
                        radius: 5
                        color:  exOrCoColorHandle(root.exOrCoCheckedIndex == 3 ? 3:3 )

                        Image {
                            width: 30
                            height: 30
                            anchors.left: parent.left
                            anchors.leftMargin: 3
                            anchors.verticalCenter: parent.verticalCenter
                            id: img_eo_left
                            source: root.lock || root.expansionOrContraction ?   imge_selectfuncation(3) :imge_selectfuncation(3)
                        }

                        MouseArea{
                            anchors.fill: parent
                            onPressed: {
                                mouseHandle(3)


                            }
                            onReleased: {

                            }
                        }
                    }
                }
/******************************************************************************/
                //锁
                Rectangle{
                    width: 52
                    height: 52
                    anchors.top:  left_rect.top
                    anchors.right: parent.right
                    color: '#fff'
                    radius: 5
                    anchors.rightMargin: 3

                    Image {
                        width: 30
                        height: 30
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenter: parent.verticalCenter
                        id: name
                        source: root.lock == false ? 'qrc:/img/lock_open.png' : 'qrc:/img/lock_close.png'
                    }

                    MouseArea{
                        anchors.fill: parent
                        onPressed: {
                            root.lock = !root.lock
                        }
                    }
                }
            }


        }
    }

}
